<template>
    <el-button-group>
        <template v-for="(button) in groupOperations">
            <template v-if="$stObjectTools.getVal(button,'show',{groupParam: groupParam,button: button}) !== false">
                <StElButton
                        :disabled="$stObjectTools.getVal(button,'disabled',{groupParam: groupParam,button: button})"
                        @click="handleOperations(button)"
                        :type="$stObjectTools.getVal(button,'type') || $stElStyleTools.aiButtonStyle($stObjectTools.getVal(button,'label')).type || 'primary'"
                        :icon="$stObjectTools.getVal(button,'icon') || $stElStyleTools.aiButtonStyle($stObjectTools.getVal(button,'label')).icon || 'st-icon-empty'"
                        size="mini"
                        :title="$stObjectTools.getVal(button,'title',{groupParam: groupParam,button: button})"
                        :loading="$stObjectTools.getVal(button,'loading') || localButtonLoading[button.code]"
                        :key="button.code + 'button'"
                        :stype="button.stype"
                        v-popover:[buttonPopover(button)]>{{$stObjectTools.getVal(button,'label',{groupParam: groupParam,button: button})}}</StElButton>
                <el-popover
                        v-if="button.popover && !$stObjectTools.isEmpty(button.popover)"
                        :key="button.code + 'popover'"
                        :ref="button.popover.ref || button.code"
                        v-bind="button.popover">
                    <slot :name="button.popover.ref || button.code"></slot>
                </el-popover>
            </template>
        </template>

        <el-dropdown size="mini" v-if="moreOperations.length > 0" @command="handleOperations">
            <StElButton :type="computedOperationMoreButtonOptions.type"
                       :icon="computedOperationMoreButtonOptions.icon"
                       :stype="computedOperationMoreButtonOptions.stype"
            >
                {{computedOperationMoreButtonOptions.text}}<i class="el-icon-arrow-down el-icon--right"></i>
            </StElButton>
            <el-dropdown-menu slot="dropdown">
                <template v-for="(button,index) in moreOperations">
                    <el-dropdown-item
                            v-if="$stObjectTools.getVal(button,'show',{groupParam: groupParam,button: button}) !== false"
                            :disabled="($stObjectTools.getVal(button,'loading') || localButtonLoading[button.code])? true : $stObjectTools.getVal(button,'disabled',{groupParam: groupParam,button: button})"
                            :command="button"

                            :title="$stObjectTools.getVal(button,'title',{groupParam: groupParam,button: button})"
                            :divided="$stObjectTools.getVal(button,'divided')"
                            :icon="($stObjectTools.getVal(button,'loading') || localButtonLoading[button.code])? 'el-icon-loading' :($stObjectTools.getVal(button,'icon') || $stElStyleTools.aiButtonStyle($stObjectTools.getVal(button,'label')).icon)"
                            :key="index"
                    >{{$stObjectTools.getVal(button,'label',{groupParam: groupParam,button: button})}}</el-dropdown-item>
                </template>
            </el-dropdown-menu>
        </el-dropdown>
    </el-button-group>
</template>

<script>
    let defaultOperationsItem = {
        show: true,            // Boolean
        action: null,          // Function,String click事件 nav
        label: '',             // Function,String 按钮标签
        code: '',              // Function,String 按钮编号 全局唯一
        position: 'default',          // String 按钮位置，default,more
        icon: 'el-icon-document',           // 按钮图标
        type: '',           // 按钮主题
        url: '',                 // action = nav时可用
        loading: false,           // 按钮加载状态
        disabled: false,           // 按钮禁用状态
        title: '',                // title 属性，鼠标指针提示
        divided: false,           // 下拉可用，添加分割线
        actionParam: null,           // action的调用参数
        popover: {

        },           // 按钮禁用状态
    }

    export default {
        name: "StElButtonGroup",
        props:{
            operations:{
                type: Array,
                default: function () {
                    return []
                }
            },
            // 下拉按钮配置选项
            operationMoreButtonOptions:{
                type: Object,
                default: function () {
                    return {}
                }
            },
            // 自定义按钮的全局回调参数
            groupParam: {}
        },
        computed:{
            computedOperationMoreButtonOptions(){
                let defaultOperationMoreButtonOptions = {
                    type: 'primary',
                    icon: 'el-icon-menu',
                    stype: '',
                    text: '更多'
                }
                return this.$stObjectTools.extend(defaultOperationMoreButtonOptions,this.operationMoreButtonOptions)
            },
            // 平铺的操作
            groupOperations(){
                let r = []
                this.operations.filter(item => item.position == undefined || item.position == 'default')
                    .forEach((item,index) => {
                        let btn = this.$stObjectTools.extendDeep(defaultOperationsItem,item)
                        if(!btn.code){
                            btn.code = 'defaultCode' + index;
                        }
                        r.push(btn)
                    })
                return r
            },
            // 下拉中的操作
            moreOperations(){
                let r = []
                this.operations.filter(item => item.position == 'more')
                    .forEach((item,index) => {
                        let btn = this.$stObjectTools.extendDeep(defaultOperationsItem,item)
                        if(!btn.code){
                            btn.code = 'defaultMoreCode' + index;
                        }
                        r.push(btn)
                    })
                return r
            }
        },
        data(){
            return {
                localButtonLoading: {}
            }
        },
        methods:{
            buttonPopover(button){
                return (button.popover)?(button.popover.ref || button.code):null
            },
            handleOperations(button) {
                let action = button.action
                if (typeof action == 'function') {
                    let handleConfig = action({actionParam: button.actionParam,groupParam: this.groupParam,button: button})
                    // handleConfig 同StElButton.vue自定义请求处理参数
                    if(handleConfig && this.$stObjectTools.isObject(handleConfig)){
                        this.handle(handleConfig,button)
                    }
                }else if (action == 'nav') {
                    this.$router.push(button.url)
                }
            },
            handle(config,button){
                if(config.url && config.method){
                    if(config.confirmText){
                        this.$confirm(config.confirmText, '提示', {
                            type: 'warning'
                        }).then(() => {
                            this.doHandle(config,button)
                        })
                    }else {
                        this.doHandle(config,button)
                    }

                }
                this.$emit('click')

            },
            doHandle(config,button) {
                this.setButtonLoading(button.code,true)
                this.$emit('loading',true,button)
                let options = {
                    method: config.method,
                    url: config.url,
                }
                if ('get' == options.method) {
                  options.params = config.params || {}
                }else {
                  options.data = config.params || {}
                }
                this.axios(options)
                    .then(res=>{
                        this.$emit('requestSuccess',res.data,button)
                        if(button.requestSuccess){
                            button.requestSuccess({actionParam: button.actionParam,groupParam: this.groupParam,button: button})
                        }

                    }).catch(error=>{
                    this.$emit('requestError',error,button)
                    if(button.requestError){
                        button.requestError({actionParam: button.actionParam,groupParam: this.groupParam,button: button})
                    }
                    if(error.response){
                        if(error.response.data && error.response.data.errorMsg){
                            this.$message.error(error.response.data.errorMsg)
                        }
                    }else {
                        this.$message.error('网络错误或服务不可用')
                    }
                }).finally(()=>{
                    this.setButtonLoading(button.code,false)
                    this.$emit('loading',false,button)
                })
            },
            // code 按钮编号
            setButtonLoading (code,loading){
                this.$set(this.localButtonLoading,code,loading)
            }
        }
    }
</script>

<style scoped>

</style>